<template>
  <div>
    <div>
      <button @click="triggerHmtl">生成界面</button>
    </div>
    <div>
      <el-input placeholder="请输入ddl" type="textarea" v-model="form.ddl" />
      <br />
      <button @click="init" style="margin-top: 10px">生成table</button>
    </div>
    <hr />

    <div>
      <!-- form search渲染 -->
      <div>
        <section>
          <div
            v-for="(item, colIndex) in formSearchNamespace.fields"
            :key="item.key"
            v-if="item._display"
            style="margin-right: 10px; display: flex; margin-bottom: 10px"
          >
            <label
              @click="
                () => {
                  item._display = 0;
                  $forceUpdate();
                }
              "
              for=""
              :style="`color:${item.color}`"
              >  {{ item.key }}--{{ item.description }}</label
            >
            <template v-if="item.type != 'select'">
              <input type="text" />
            </template>
            <template v-else>
              <select name="" id="">
                <option
                  v-for="option in item._options2array"
                  :key="option.value"
                >
                  {{ option.label }}
                </option>
              </select>
            </template>
            <div>
              <button
                @click="
                  () => {
                    formSearchNamespace.dialogVisible = true;
                    item.colIndex = colIndex;
                    formSearchNamespace.editField = item;
                  }
                "
              >
                修改
              </button>
            </div>
          </div>

          <div>
            <button @click="formSearchNamespace.leftJoin1.dialogVisible = true">
              leftJoin1
            </button>
            <!-- 修改的弹出框 -->
            <el-dialog
              title="提示"
              :visible.sync="formSearchNamespace.leftJoin1.dialogVisible"
              width="500px"
            >
              <div>
                <el-input
                  type="textarea"
                  placeholder="请输入需要关联的ddl"
                  v-model="formSearchNamespace.leftJoin1.ddl"
                ></el-input>
                <button @click="ajaxLeftJoi1">生成关联</button>
              </div>

              <span slot="footer" class="dialog-footer">
                <el-button @click="formSearchNamespace.dialogVisible = false"
                  >取 消</el-button
                >
                <el-button
                  type="primary"
                  @click="
                    formSearchNamespace.fields[
                      formSearchNamespace.editField.colIndex
                    ] = formSearchNamespace.editField;
                    formSearchNamespace.dialogVisible = false;
                    $forceUpdate();
                  "
                  >确 定</el-button
                >
              </span>
            </el-dialog>
          </div>
        </section>

        <!-- 放出来 -->
        <div>黑名单</div>
        <div style="display: flex; opacity: 0.5; flex-wrap: wrap">
          <div
            v-for="item in formSearchNamespace.fields"
            :key="item.key"
            v-if="item._display == 0"
            style="margin-right: 10px; display: flex; margin-bottom: 10px"
            @click="
              () => {
                item._display = 1;
                $forceUpdate();
              }
            "
          >
            <label for="" :style="`color: ${item.color}`">
              {{ item.key }}{{ item.description }},</label
            >
          </div>
        </div>

        <!-- 修改的弹出框 -->
        <el-dialog
          title="提示"
          :visible.sync="formSearchNamespace.dialogVisible"
          width="500px"
        >
          <div>
            {{ formSearchNamespace.editField.key }}<br />
            描述：<input
              type="text"
              v-model="formSearchNamespace.editField.description"
            /><br />
            是否显示：<input
              type="text"
              v-model="formSearchNamespace.editField._display"
            /><br />
            字段类型[string,select] ：<input
              type="text"
              v-model="formSearchNamespace.editField.type"
            /><br />
            select字段opions key@@value 【1#aa,2#aa,3#bb】 ：
            <!-- value:str.split('#')[0],label:str.split('#')[1] -->
            <textarea
              type="text"
              v-model="formSearchNamespace.editField._options"
              @change="changeSelectDialog"
            /><br />
            select字段opions 远程js脚本
            <textarea
              type="text"
              v-model="formSearchNamespace.editField._remoteFunc"
            /><br />
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="formSearchNamespace.dialogVisible = false"
              >取 消</el-button
            >
            <el-button
              type="primary"
              @click="
                formSearchNamespace.fields[
                  formSearchNamespace.editField.colIndex
                ] = formSearchNamespace.editField;
                formSearchNamespace.dialogVisible = false;
                $forceUpdate();
              "
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>

      <hr />
      <hr />
    </div>
  </div>
</template>
<style>
table td {
  border: solid #000 1px;
}
</style>
<script>
function getRandomColor() {
  //随机生成十六进制颜色
  var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数
  while (hex.length < 6) {
    //while循环判断hex位数，少于6位前面加0凑够6位
    hex = "0" + hex;
  }
  return "#" + hex; //返回‘#'开头16进制颜色
}

export default {
  data() {
    return {
      form: { ddl: sessionStorage.getItem("form.ddl") },
      json2: {},
      tableCosArray: [],
      blackList: [
        "id",
        "remarks",
        "tenant_type",
        "tenant_id",
        "del_state",
        "add_user",
        "add_user_id",
        "add_time",
        "edit_user",
        "edit_user_id",
        "server_number",
      ],

      formSearchNamespace: {
        dialogVisible: false,
        blackList: [
          "id",
          "add_time",
          "remarks",
          "tenant_type",
          "tenant_id",
          "del_state",
          "add_user",
          "add_user_id",
          "last_edit_time",
          "edit_user",
          "edit_user_id",
          "server_number",
        ],
        editField: {},
        fields: [
          /**{
              key
              description
              _display:
              type:string,select
              _options:[{},{},{}]
              _remoteFunc:function return promise<{label:'',value:''}>
            } */
        ],
        leftJoin1: { dialogVisible: false, ddl: "", fields: [] },
        leftJoin2: { dialogVisible: false, ddl: "", fields: [] },
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    ajaxLeftJoi1() {
      axios
        .post("/databases/createTemplate", {
          ddl: this.formSearchNamespace.leftJoin1.ddl,
        })
        .then((res) => res.data)
        .then((res) => {
          var tableName = res.tableName;

          var json2 = res.json2;

          var tableCosArray = [];
          var color = getRandomColor();
          _.map(res.json2.cols, (item, key) => {
            item.color = color;
            item.key = `${tableName}_${key}`;
            item._display = this.isNotContainWithArray(
              this.$data.blackList,
              key
            )
              ? 1
              : 0;
            tableCosArray.push(item);
          });
          this.formSearchNamespace.fields =
            this.formSearchNamespace.fields.concat(tableCosArray);
          //   this.$data.formSearchNamespace.leftJoin1.fields = tableCosArray;
        });
    },
    splitOptions(str) {
      var a = { value: str.split("@@")[0], label: str.split("@@")[1] };
      console.log("a", a);
      return a;
    },
    changeSelectDialog(e) {
      var value = e.target.value;
      if (value) {
        this.formSearchNamespace.editField._options2array = value
          .split("\n")
          .map(this.splitOptions);
      } else {
        this.formSearchNamespace.editField._options2array = [];
      }

      this.formSearchNamespace.fields[
        this.formSearchNamespace.editField.colIndex
      ] = this.formSearchNamespace.editField;
    },
    clickCol(str) {
      this.blackList.push(str);
      console.log("this.blackList.", this.blackList);
    },
    isNotContain(str) {
      return this.blackList.findIndex((item2) => item2 == str) < 0;
    },
    isNotContainWithArray(array, str) {
      return array.findIndex((item2) => item2 == str) < 0;
    },
    initFormSearch(arrayCols) {
      this.$data.formSearchNamespace.fields = arrayCols.map((col) => {
        col._display = this.isNotContainWithArray(
          this.$data.formSearchNamespace.blackList,
          col.key
        )
          ? 1
          : 0;
        col._options = [];
        col._remoteFunc = null;
        return col;
      });
    },
    init() {
      sessionStorage.setItem("form.ddl", this.form.ddl);
      axios
        .post("/databases/createTemplate", { ddl: this.form.ddl })
        .then((res) => res.data)
        .then((res) => {
          this.tableName = res.tableName;

          this.$data.json2 = res.json2;

          var tableCosArray = [];
          var color = getRandomColor();
          _.map(res.json2.cols, (item, key) => {
            item.color = color;
            item.key = key;
            item._display = this.isNotContainWithArray(
              this.$data.blackList,
              key
            )
              ? 1
              : 0;
            tableCosArray.push(item);
          });
          this.$data.tableCosArray = tableCosArray;
          console.log("this.$data.tableCosArray", this.$data.tableCosArray);
          console.log(
            "this.$data.tableCosArray ",
            JSON.stringify(this.$data.tableCosArray.map((item) => item.key))
          );
          this.initFormSearch(_.cloneDeep(tableCosArray));

          this.$data.result.entity = res.entity;
          this.$data.result.mapper = res.mapper;
          this.$data.result.service = res.service;
          this.$data.result.serviceImpl = res.serviceImpl;
          this.$data.result.controller = res.controller;
          this.$data.result.vuelist = res.vuelist;
          this.$data.result.vuemodify = res.vuemodify;
          this.$data.result.jsjson = res.jsjson;
          this.$data.result.vuelist1 = res.vuelist1;
          this.$data.result.vuemodify1 = res.vuemodify1;
          this.$data.result.api = res.api;
        });
    },
    triggerHmtl() {},
  },
};
</script>